<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${article.title}">标题</title>
    <meta name="Description" th:content="${article.title}" content="标题"/>
    <meta name="Keywords" th:content="${article.labelNames}" content="标签"/>
    <th:block th:insert="layout :: public_head">
    </th:block>
    <link rel="stylesheet" type="text/css" href="/assets/editor.md/css/editormd.min.css"/>
</head>
<body>
<th:block th:insert="layout :: public_page">
</th:block>
<div class="main detail">
    <div class="item">
        <div class="item_title" th:text="${article.title}">标题</div>
        <p class="label"><span th:text="${#temporals.format(article.createTime, 'yyyy/MM/dd')}">2021/01/01</span><span th:each="name,nameStat:${article.labelNames.split(',')}">&nbsp;&nbsp;<span class="subtitle" th:text="${name}">Nacos</span></span></p>
        <div id="editormdDiv">
            <textarea style="display:none;" th:text="${article.md}">内容</textarea>
        </div>
        <p class="praise">
            <i class="iconfont icon-yanjing"></i><span id="viewCount" th:text="${article.view}"></span>
        </p>
    </div>
    <div class="message">
        <div class="layui-card">
            <div class="layui-card-header">
                <form class="layui-form" action="">
                    <div class="layui-form-item layui-form-text">
                        <div class="nicknameDiv">
                            你的随机昵称：<span class="nickname" th:text="${nickname}">昵称</span>
                        </div>
                        <div class="layui-input-block">
                            <textarea placeholder="有问题？直接留言吧&nbsp;^_^&nbsp;我会立即收到邮件提醒并尽快回复！" class="layui-textarea" id="LAY-msg-content"></textarea>
                            <div class="btn-box">
                                <button class="layui-btn" type="button" onclick="discuss($('#LAY-msg-content').val(),0)">发表评论</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <div class="title">
                    <span>全部评论</span>
                </div>
                <ul class="list-item">
                    <th:block th:insert="article/discuss :: discuss(discussList=${discussList},parentsNickname=null)">
                    </th:block>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="right-content">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>目录</legend>
    </fieldset>
    <div id="toc-container" class="markdown-body editormd-preview-container"></div>
</div>
<th:block th:insert="layout :: public_script">
</th:block>
<script src="/assets/editor.md/editormd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/editor.md/lib/marked.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/assets/editor.md/lib/prettify.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use('layer', function () {
        let layer = layui.layer;
    });

    $(function () {
        editormd.markdownToHTML('editormdDiv', {
            htmlDecode: 'style,script,iframe',
            tocContainer: "#toc-container",
            atLink: false,
            emailLink: false
        });

        $("#editormdDiv a").each(function () {
            $(this).attr("target", "_blank");
        })

        $("#toc-container").css("max-height", $(window).height() * 0.6);

        view();
    });

    function view() {
        if ($.cookie('admin') != null) {
            console.log("管理员不记录访问")
            return;
        }
        if ($.cookie('view[[${article.id}]]') != [[${article.id}]]) {
            let json = {"articleId": [[${article.id}]], "referer": "[[${referer}]]"};
            $.ajax({
                url: "/article/addView",
                data: JSON.stringify(json),
                method: "post",
                dataType: "json",
                contentType: 'application/json',
                success: function (data) {
                    if (data.code == 0) {
                        $('#viewCount').html(([[${article.view}]] + 1));
                        $('#allViewCount').html([[${countView}]] + 1);
                        $.cookie(
                            'view[[${article.id}]]', '[[${article.id}]]', {
                                'path': '/',
                                'expires': 3650
                            }
                        );
                    } else if (data.code == 1001) {
                        $.cookie(
                            'view[[${article.id}]]', '[[${article.id}]]', {
                                'path': '/',
                                'expires': 3650
                            }
                        );
                    }
                }
            });
        }
    }

    function discuss(content, revertId) {
        if (content.replace(/\s/g, '') == "") {
            layer.msg('请先输入留言');
        } else {
            let load = layer.msg('正在发送。。。', {
                icon: 16
                , shade: 0.1
                , time: 0
            });
            $.post('/article/addDiscuss', {
                articleId: '[[${article.id}]]',
                nickname: '[[${nickname}]]',
                content: content,
                revertId: revertId
            }, function (date) {
                layer.close(load);
                layer.msg('回复成功！等待审核~');
                $('#LAY-msg-content').val("");
            })
        }
    }

    function revert(revertNickname, revertId) {
        layer.prompt({
            formType: 2,
            title: '回复：' + revertNickname
        }, function (text, index) {
            layer.close(index);
            discuss(text, revertId);
        });
    }
</script>
</body>
</html>
